<template>
  <div class="demo-image__preview">
    <el-image-viewer v-if="showViewer"
                     :url-list="previewList" hide-on-click-modal
                     @close="()=>{showViewer = false}" />
  </div>

</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElMessage } from "element-plus";

const previewList = ref<string[]>([]);
const showViewer = ref(false);

const ShowBigImage = (url: string) => {

  if (!isImageUrlByExtension(url)) {//非图片 跳转
    if (url == "" || url == "/") {
      ElMessage.info(`无效的链接${url}，无法跳转`);
      return;
    }
    console.log("跳转 -- console.log");
    window.open(url);
    return;
  }
  showViewer.value = true;
  previewList.value[0] = url;
};

const ShowBigImages = (urls: string[]) => {
  showViewer.value = true;
  previewList.value = urls;

};

function isImageUrlByExtension(filename: string): boolean {
  const imageExtensions = [".jpg", ".jpeg", ".png", ".gif", ".bmp", ".dib", ".jfif", ".tiff", ".webp", ".ico"]; // 添加更多图片格式如果需要
  filename = filename.split("?")[0];
  const extensionMatch = filename.match(/\.\w+$/i);
  if (!extensionMatch) {
    return false;
  }

  const extension = extensionMatch[0].toLowerCase();
  return imageExtensions.includes(extension);
}


defineExpose({ ShowBigImage, ShowBigImages });
</script>

<style scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}

.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}

.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
</style>
